<!-- 调控管家--智慧化调控 -->
<template>
    <div class="t-ctn">
        <div class="ctn-top">
            <div class="ctn-top-l">
                <div style="height: 30px">
                    <p v-if="weather">{{weather.updateTime}}&nbsp;&nbsp;{{weather.city}}&nbsp;&nbsp;{{weather.temp}}℃&nbsp;&nbsp;{{weather.weaTxt}}&nbsp;&nbsp;</p>
                </div>
                <el-form
                    ref="formCheckCfg"
                    label-width="150px"
                    :model="formCheckCfg">
                    <el-form-item>
                        <div style="display: flex;margin-left: -150px">
                            <el-select v-model="formCheckCfg.systemId">
                                <el-option
                                    v-for="(item,index) in typeOptions"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.systemid">
                                </el-option>
                            </el-select>
                            <el-button type="primary" style="width: 127px;margin-left: 17px" @click="changeSys">确定</el-button>
                        </div>
                    </el-form-item>
                    <div style="text-align:left;margin-top:10px">
                        <el-input
                            style="width:150px"
                            v-model="formCheckCfg.name"
                            placeholder="搜索换热站"
                            clearable>
                        </el-input>
                    </div>
                    <el-form-item label="受控设备比例">
                       <!-- <el-input
                            v-model="device.device" :disabled="true"
                            >
                        </el-input>-->
                        <span style="font-size: 16px;color: #00e4ff">{{device.device}}</span>
                    </el-form-item>
                    <el-form-item label="调控总面积(万平米)">
                        <!--<el-input
                            v-model="device.area" :disabled="true"
                            >
                        </el-input>-->
                        <span style="font-size: 16px;color: #00e4ff">{{device.area}}</span>
                    </el-form-item>
                    <el-form-item></el-form-item>
                </el-form>
            </div>
            <div class="ctn-top-r">
                <div class="c-title">
                    <span>今日热源预测曲线(24小时)</span>
                    <div class="line"></div>
                </div>
                <!-- 线形图 -->
                <div id="chartL" style="height: 200px;width: 100%"></div>
            </div>
        </div>
        <div class="c-title t">
            <span>换热站及下辖机组</span>
            <div class="line"></div>
        </div>
        <!-- 高德地图 -->
        <div style="height: calc(100% - 370px);margin: 25px 43px">
            <!--<el-button type="primary" style="width: 127px;margin-left: 17px" @click="showDetails">地图上机组详情</el-button>-->
            <el-amap vid="amap"  :center="center" :mapStyle="mapStyle" :zoom="13" :buildingAnimation="true"
                     :amap-manager="amapManager" style="height: 100%;width: 100%">
                <!-- 标注 -->
                <template v-if="stationPosition && stationPosition.length > 0">
                    <template v-for="(item,index) in stationPosition">
                        <el-amap-marker
                            v-if="item.longitude && item.latitude"
                            :position="[item.longitude,item.latitude]"
                            :events="item.events"
                            :offset="[-35,-20]"
                            :key="'marker'+index">
                            <div class="markers">
                                <span class="marker-hot"></span>
                                <span class="name">{{item.name}}</span>
                            </div>
                        </el-amap-marker>
                    </template>
                </template>
            </el-amap>
        </div>

        <!-- 地图上换热站坐标点点击查看详情 -->
        <el-dialog v-if="openCfg" :visible.sync="openCfg" custom-class="check" width="323px">
            <div class="s-detail-h" v-if="openCfgDate && openCfgDate.length > 0">
                <div class="s-d-item-h" v-for="item in openCfgDate">
                    <p @click="showCCre(item)" style="cursor: pointer">{{item.name}}</p>
                    <div class="s-d-item-r-h">
                        <p>目标二次供水温度(℃)：<span style="color: #00e4ff;margin-left: 20px">{{item.tt211Forecast}}</span></p>
                        <p>当前二网供水温度(℃)：<span style="color: #00e4ff;margin-left: 20px">{{item.tt211Value}}</span></p>
                        <p>更新时间：<span style="color: #00e4ff;margin-left: 20px">{{item.time}}</span></p>
                    </div>
                     <p style="color: #5c9dff;font-size: 16px;text-align: center;cursor:pointer;" @click="showEchart2(item['unitId'],item)">机组策略曲线</p>
                </div>
            </div>
        </el-dialog>

        <!-- 单元 -->
        <el-dialog v-if="openCfgC" :visible.sync="openCfgC" custom-class="check" :title="cc.name" width="1350px">
            <el-form
                ref="formCheckCfg"
                label-width="100px"
                :inline="true"
                :model="formCheckCfg">
                <el-form-item prop="valueName">
                    <el-input
                        v-model="formCheckCfg.valueName"
                        placeholder="小区名称"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >查询</el-button>
                </el-form-item>
            </el-form>
            <div class="s-detail" v-if="CCre.length > 0">
                <div class="s-d-item" v-for="item in CCre">
                    <div class="s-d-item-l">
                        <span>单元号</span>
                        <span style="color: #00e4ff;margin: 5px 0;">{{item.hallNo}}</span>
                        <span class="img-build"></span>
                    </div>
                    <div class="s-d-item-r">
                        <p>当前阀门开度：<span style="color: #00e4ff">{{item.covCurrent}}</span></p>
                        <p>目标阀门开度：<span style="color: #00e4ff">{{item.covForecast}}</span></p>
                        <p>当前回水温度(℃)：<span style="color: #00e4ff">{{item.tt221Current}}</span></p>
                        <p>目标回水温度(℃)：<span style="color: #00e4ff">{{item.tt221Forecast}}</span></p>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog v-show="openCfgE" :title="unitName+'策略曲线'" :visible.sync="openCfgE" custom-class="check" width="1240px" height="900px">
            <div class="tabs" style="justify-content: start;">
                <span :class="['tab-item',{'active':currentTab ===2}]" @click="changeTypeTab(2)">策略曲线</span>
                <span :class="['tab-item',{'active':currentTab ===1}]" @click="changeTypeTab(1)">实时下发</span>
                <div style="margin-left:50px">
                    <el-date-picker
                        v-model="startTime"
                        type="datetime"
                        placeholder="选择检索开始日期">
                    </el-date-picker>
                    <span>~</span>
                    <el-date-picker
                        v-model="endTime"
                        type="datetime"
                        placeholder="选择检索结束日期">
                    </el-date-picker>
                    <el-button type="primary" @click="searchIfo" style="margin-left:50px">查询</el-button>
                </div>

            </div>
            <div id="chartE" style="height: 530px;width: 100%"></div>
        </el-dialog>
    </div>
</template>

<script>
import echarts from 'echarts'
import API from "../../../request/api";
require('echarts/theme/macarons') // echarts 主题风格
import {  lazyAMapApiLoaderInstance,AMapManager } from 'vue-amap'
let amapManager = new AMapManager()

export default {
    name: 'SmartSet',
    components: {

    },
    computed: {

    },
    data() {
        return {
            self:this,
            amapManager,
            weather: localStorage.getItem('weather') ? JSON.parse(localStorage.getItem('weather')) : '',
            openCfgE: false,
            unitName: '',
            startTime: '',
            endTime: '',
            optionsE: {
                color:['rgba(3,195,250,1)'],
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisPointer:{
                        label:{
                            color:'rgba(0,228,255,1)',
                            backgroundColor:'rgba(0,0,0,0.3)'
                        }
                    },
                    axisTick:{
                        show: false
                    }
                },
                yAxis:[
                    {
                        type: 'value',
                        scale: true,
                        name: '实时下发策略值',
                        min: 'dataMin', // 最小值
                        axisTick:{
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#143C7E',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisPointer:{
                            label:{
                                color:'rgba(0,228,255,1)',
                                backgroundColor:'rgba(0,0,0,0.3)'
                            }
                        },
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitArea:{
                            areaStyle:{
                                color:'transparent'
                            }
                        }
                    }
                ],
                grid: {
                    top: 50,
                    left: '7%',
                    right: '40px',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10],
                },
                series: []
            }, // 报表参数
            optionsP: {
                color:['rgba(3,195,250,1)'],
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisPointer:{
                        label:{
                            color:'rgba(0,228,255,1)',
                            backgroundColor:'rgba(0,0,0,0.3)'
                        }
                    },
                    axisTick:{
                        show: false
                    }
                },
                yAxis:[
                    {
                        type: 'value',
                        scale: true,
                        name: '二网供温(℃)',
                        min: 'dataMin', // 最小值
                        axisTick:{
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#143C7E',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisPointer:{
                            label:{
                                color:'rgba(0,228,255,1)',
                                backgroundColor:'rgba(0,0,0,0.3)'
                            }
                        },
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitArea:{
                            areaStyle:{
                                color:'transparent'
                            }
                        }
                    }
                ],
                grid: {
                    top: 50,
                    left: '5%',
                    right: '40px',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10],
                },
                series: []
            }, // 报表参数
            chartE: null,
            formCheckCfg: {
                systemId: '',
                name:''
            },
            typeOptions: [],
            currentTab: 2,
            options: {
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show:true,
                        lineStyle: {
                            color: 'rgba(55,182,242,0.14)'
                        }
                    },
                    axisPointer:{
                        label:{
                            color:'rgba(0,228,255,1)',
                            backgroundColor:'rgba(0,0,0,0.3)'
                        }
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: '#fff'
                        },
                    },
                    axisTick:{
                        show: false
                    },
                },
                yAxis:[
                    {
                        type: 'value',
                        scale: true,
                        position: 'left',
                        min: 'dataMin', // 最小值

                        axisTick:{
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#143C7E',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisPointer:{
                            label:{
                                color:'rgba(0,228,255,1)',
                                backgroundColor:'rgba(0,0,0,0.3)'
                            }
                        },
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitArea:{
                            areaStyle:{
                                color:'transparent'
                            }
                        }
                    },
                ],
                grid: {
                    top: 20,
                    left: '2%',
                    right: '40px',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10],
                },
                series: []
            }, // 报表参数
            chart: null,
            openCfg: false,
            openCfgDate: [],
            center: [117.201538, 39.085294], // 地图中心点
            mapStyle: 'amap://styles/blue', // 地图主题色
            pitch:68, // 地图俯仰角度，有效范围 0 度- 83 度
            viewMode:'3D', // 地图模式
            plugin: [{
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 1000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: false,        //显示定位按钮，默认：true
                buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                showMarker: true,        //定位成false功后在定位到的位置显示点标记，默认：true
                showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：
                extensions:'all',
                pName: 'Geolocation',
                events: {
                    /*init(o) {
                        // o 是高德地图定位插件实例
                        o.getCurrentPosition((status, result) => {
                            if (result && result.position) {
                                self.lng = result.position.lng;
                                self.lat = result.position.lat;
                                self.center = [self.lng, self.lat];
                                self.$nextTick();
                            }
                        });
                    }*/
                }
            }],
            openCfgC:false,
            unitId: '',
            CCre: [],
            cc: {},
            device: {
                area: '',
                device: '',
            },
            polyline:[],
            stationPosition: [] // 换热站位置
        };
    },
    mounted() {
        this.sourceTarget();
        this.chart = echarts.init(document.getElementById('chartL'), 'macarons');
    },
    watch: {
    },
    methods: {
        changeTypeTab(id){
            this.currentTab = id
            if(id === 1){
                //this.showEchart(this.unitId)
                this.showEchartS(this.unitId)
            }

            if(id === 2){
                this.showEchart2(this.unitId)
            }
        },
        // 切换供热系统
        changeSys(){
            this.showInf(this.formCheckCfg.systemId,this.formCheckCfg.name)
        },
        // 供热系统列表
         sourceTarget(){
            API.sourceTarget().then(res => {
                if(res.code === 0){
                    this.typeOptions = res.result;
                    if(res.result.length > 0){
                        this.formCheckCfg.systemId = res.result[0].systemid
                        this.showInf(this.formCheckCfg.systemId,this.formCheckCfg.name)
                    }
                }else{
                    this.msgWarning(res.message);
                }
            }).catch(err => {
                // this.msgWarning(err);
            });
        },
        async showInf(systemId,name){
            const that = this
           let res1 =  await API.forecastChart({systemId:systemId})
           let res12 =  await API.stationPosition({systemId:systemId,name:name})
           let res3 =  await API.getReguArea({systemId:systemId})
            if(res1.code === 200){
                this.initEcharts(res1.result)
            }else{
                this.msgWarning(res1.message);
            }

            if(res3.code === 200){
                this.device = res3.result
            }else{
                this.msgWarning(res3.message);
            }

            if(res12.code === 0){
                    this.stationPosition = res12.result;
                let _window = window    //使用window ts 报错
                if(res12.result && res12.result.length > 0){
                    this.center = [res12.result[0].longitude,res12.result[0].latitude];

                    res12.result.forEach(item=>{
                        if(item.longitude && item.latitude){
                            const parent = that.polyline.find(cur => cur.group === item.group)
                            if(parent){
                                parent.childs.push([item.longitude,item.latitude])
                            }else{
                                const obj ={
                                    group:item.group,
                                    childs:[[item.longitude,item.latitude]]
                                }
                                that.polyline.push(obj)
                            }
                        }

                        item.events = {
                            click(){
                                API.unitData({stationId:item.stationId}).then(res => {
                                    if(res.code === 0){
                                        that.openCfgDate = res.result
                                        that.openCfg = true
                                    }else{
                                        this.msgWarning(res.message);
                                    }
                                }).catch(err => {
                                    // this.msgWarning(err);
                                });
                            }
                        }
                    })

                    if(that.polyline && that.polyline.length >0){
                        lazyAMapApiLoaderInstance.load().then(() => {

                            let map = that.amapManager.getMap()

                            //使用插件
                            map.plugin(['AMap.BezierCurve'], function() {
                                //初始化heatmap对象
                                if(that.polyline.length > 0){
                                    that.polyline.map(item=>{
                                        if(item.group){
                                            let p = new _window.AMap.BezierCurve({
                                                map:map, //初始化的地图变量
                                                path: item.childs, //折线的存放数组，很重中。一般是好多经纬度组成的数组
                                                zIndex: 20,
                                                isOutline: true,
                                                outlineColor: '#00cbff',
                                                borderWeight: 1,
                                                strokeColor: "#00cbff",
                                                strokeOpacity: 0.6,
                                                strokeWeight: 1,
                                                // 线样式还支持 'dashed'
                                                strokeStyle: "dashed",
                                                // strokeStyle是dashed时有效
                                                strokeDasharray: [10, 10],
                                                lineJoin: 'round',
                                                lineCap: 'round',
                                            })

                                            p.setMap(map)
                                        }
                                    })
                                }
                            })
                        })
                    }
                }
            }else{
                this.msgWarning(res12.message);
            }
        },
        // 设置报表初始值
        initEcharts(tempForecast){
            this.options.series = [];
            if(tempForecast){
                // 室温预测
                this.options.series.push({
                    itemStyle: {
                        normal: {
                            color: 'rgba(81,255,208,1)',
                            lineStyle: {
                                color: 'rgba(81,255,208,1)',
                                width: 2
                            },
                        }
                    },
                    smooth: true,
                    symbolSize: 4, // 图表的点的大小
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(63,227,236,0.8)'
                            }, {
                                offset: .4,
                                color: 'rgba(63,227,236,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(63,227,236,0.00)'
                            }])
                        }
                    },
                    yAxisIndex: 0,
                    data: this.changeEchartData(tempForecast,'time','value'),
                    animationDuration: 1000,
                    animationEasing: 'cubicOut'
                });
            }else{
                this.options.series = []
            }


            this.chart.setOption(this.options,true);
        },
        changeEchartData(chartData,name,value){
            let seriesData = [];
            chartData.forEach(item=>{
                let outObj = [item[name],item[value]];
                seriesData.push(outObj);
            });
            return seriesData
        },
        showCCre(item){
            this.cc = item
            API.selectHallData({unitId:item.unitId}).then(res => {
                if(res.code === 0){
                    this.openCfgC = true;
                    this.CCre = res.result;

                }else{
                    this.msgWarning(res.message);
                }
            }).catch(err => {
                // this.msgWarning(err);
            });

        },
        showEchart(unitId,item){
            this.unitId = unitId;
            const that = this
            API.predictChart({unitId:unitId}).then(res => {
                if(res.code === 200){
                    that.unitName=item.name
                    that.openCfgE = true;
                    that.initEchartsE(res.result)
                }else{
                    this.msgWarning(res.message);
                }
            }).catch(err => {
                // this.msgWarning(err);
            });
        },
        // 实时下发
        showEchartS(){
                    let data = {
                                    unitId: this.unitId,
                        startTime: this.startTime ? this.moment(this.startTime).format('yyyy-MM-DD HH:mm:ss') : '',
                        endTime: this.endTime ? this.moment(this.endTime).format('yyyy-MM-DD HH:mm:ss') : '',
                                }
                    const that = this
                    API.StrategyAndTemp(data).then(res => {
                        if(res.code === 200){
                            that.initEchartsE(res.result)
                        }else{
                            this.msgWarning(res.message);
                        }
                    }).catch(err => {
                        // this.msgWarning(err);
                    });
        },
        // 策略曲线加入时间查询
        searchIfo(){
            debugger
            let data = {
                unitId: this.unitId,
                startTime: this.startTime ? this.moment(this.startTime).format('yyyy-MM-DD HH:mm:ss') : '',
                endTime: this.endTime ? this.moment(this.endTime).format('yyyy-MM-DD HH:mm:ss') : '',
            }
            API.strategyChartC(data).then(res => {
                if(res.code === 200){
                    this.initEchartsP(res.result)
                }else{
                    this.msgWarning(res.message);
                }
            }).catch(err => {
                // this.msgWarning(err);
            });
        },
        showEchart2(unitId,item){
            this.unitId = unitId;
            API.strategyChartC({unitId:unitId}).then(res => {
                if(res.code === 200){
                    this.unitName=item.name
                    this.openCfgE = true;
                    this.initEchartsP(res.result)
                }else{
                    this.msgWarning(res.message);
                }
            }).catch(err => {
                // this.msgWarning(err);
            });
        },
        initEchartsE(tempForecast){
            this.optionsE.series = [];

            if(tempForecast){
                this.optionsE.series.push({
                    name: '实时下发策略值',
                    type: 'line',
                    barWidth : 20,//柱图宽度
                    itemStyle:  {    // 图形的形状
                        color: 'rgba(0,255,255,1)'
                    },
                    data: this.changeEchartData(tempForecast,'time','setTwoTemp'),
                }, {
                    name: '室外温度',
                    type: 'line',
                    yAxisIndex: 0,
                    itemStyle: {    // 图形的形状
                        color: 'red'
                    },
                    data: this.changeEchartData(tempForecast, 'time', 'temp'),
                }, {
                    name: '华为策略',
                    type: 'line',
                    yAxisIndex: 0,
                    itemStyle: {    // 图形的形状
                        color: 'green'
                    },
                    data: this.changeEchartData(tempForecast, 'time', 'huaWeiTemp'),
                })
            }else{
                this.optionsE.series = []
            }
            this.chartE.setOption(this.optionsE,true);
        },
        initEchartsP(tempForecast){
            this.optionsP.series = [];

            if(tempForecast){
                this.optionsP.series.push({
                    name: '二网供温(℃)',
                    type: 'line',
                    barWidth : 20,//柱图宽度
                    itemStyle:  {    // 图形的形状
                        color: 'rgba(234,255,0,1)'
                    },
                    data: this.changeEchartData(tempForecast,'time','value'),
                }, {
                        name: '预测二网供温(℃)',
                        type: 'line',
                        yAxisIndex: 0,
                        itemStyle: {    // 图形的形状
                            color: 'rgba(0,255,255,1)'
                        },
                        data: this.changeEchartData(tempForecast, 'time', 'value1'),
                    }
                )
            }else{
                this.optionsP.series = []
            }

            this.chartE.setOption(this.optionsP,true);
        },
    },
    updated() {
        if(this.openCfgE){
            this.chartE = echarts.init(document.getElementById('chartE'), 'macarons');
            this.chartE.setOption(this.optionsP,true);
        }
    }
};
</script>

<style lang="scss" type="text/scss" scoped>
    .t-ctn {

        .tabs{
            height: 42px !important;
            line-height: 42px !important;
            color: #00e4ff;
            font-size: 16px !important;
            display: flex;
            justify-content: end;

            .tab-item{
                width: 97px !important;
                height: 42px !important;
                background: rgba(12,132,255,0.16);
                border: 1px solid #008aff;
                display: inline-block;
                cursor: pointer;

                &:first-child{
                    border-radius: 5px 0 0 0;
                }
                &:last-child{
                    border-radius: 0 5px 0 0;
                }

                &.active{
                    background: #2063a8;
                    border: 1px solid #008aff;
                    color: #ffffff;
                }
            }
        }

        .markers{
           display: flex;
            flex-direction: column;
            width: 100px;
            align-items: center;

            .marker-hot{
                width: 49px;
                height: 49px;
                background: url("../../../assets/common/hotsite.png") no-repeat center/100% 100%;
            }

            .name{
                font-size: 16px;
                font-weight: 400;
                color: #03faef;
                margin-top: 5px;
            }
        }

        .ctn-top{
            height: 290px;
            display: flex;
            margin-right: 42px;
            margin-left: 46px;

            .ctn-top-l{
                width: 336px;
                font-size: 18px;

                p{
                    font-size: 18px;
                    font-weight: bold;
                    text-align: left;
                    color: #ffffff;
                }
            }

            .ctn-top-r{
                flex: 1;

                .c-title{
                    height: 78px !important;
                    line-height: 78px !important;
                }
            }
        }

        .t{
            height: 30px !important;
            line-height: 10px !important;
        }

        .s-detail-h{
        color: #00e4ff;
        font-size: 18px;
            text-align: left;

            .s-d-item-r-h{
            font-size: 16px;
            color: #cee1f3;
                margin-left: 20px;
                line-height: 30px;
        }
    }

        .s-detail{
            display: flex;
            flex-wrap: wrap;

            .s-d-item{
                width: 308px;
                height: 152px;
                background: rgba(0,62,126,0.76);
                border: 1px solid #008aff;
                font-size: 18px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #cee1f3;
                margin-right: 23px;
                margin-bottom: 27px;

                .s-d-item-l{
                    margin-right: 30px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .img-build{
                        width: 56px;
                        height: 56px;
                        background: url("../../../assets/common/home-bg.png") center/100% 100%;
                    }
                }

                .s-d-item-r{
                    p{
                        height: 34px;
                        line-height: 34px;
                        margin: 0;
                    }
                }
            }
        }
    }
</style>
